<template>
    <div class="ele-body">
        <el-card>
            <Search @search="reload" />
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection"
                :headerEllipsis="false" cache-key="_id">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                    <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit()">
                        新建
                    </el-button>
                    <el-button size="small" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                        :disabled="!selection.length" @click="removeBatch">
                        批量删除
                    </el-button>
                </template>
                <template v-slot:img="{ row }">
                    <!-- <el-image v-if="row.img" style="width: 60px; height: 60px" :src="row.remoteUrl || row.img"
                    :preview-src-list="[row.remoteUrl || row.img]" /> -->
                    <img :src="row.img" alt="">
                </template>
                <!-- 操作列 -->
                <template v-slot:action="{ row }">
                    <el-link type="primary" :underline="false" @click="openEdit(row)">
                        修改
                    </el-link>
                    <el-popconfirm class="ele-action" title="确定要删除此应用吗？" @confirm="remove(row)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </ele-pro-table>
            <Edit :visible.sync="showEdit" :data="current" @done="reload" />
        </el-card>
    </div>
</template>

<script>
import { advertiseList, delAdvertise } from "@/api/advertiseList";
import Search from "./components/search.vue";
import Edit from './components/edit.vue';
import { uploadToImg, formatDate } from "@/utils/formate";
export default {
    components: { Search, Edit },
    data() {
        return {
            imageCache: {},
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 表格选中数据
            selection: [],
        }
    },
    computed: {
        // 表格列配置
        columns() {
            return [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    columnKey: 'index',
                    type: 'index',
                    label: '序号',
                    width: 50,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    prop: '_id',
                    label: '编号',
                    align: 'center'
                },
                {
                    prop: 'type',
                    label: '类型',
                    align: 'center',
                    slot: 'type',
                    formatter: (row) => {
                        switch (row.type) {
                            case 1: return "推荐";
                            case 2: return "破解";
                            case 3: return "看片";
                            case 4: return "视频";
                            default: return "";
                        }
                    }
                },
                {
                    prop: 'status',
                    label: '状态',
                    align: 'center',
                    slot: 'status',
                    formatter: (row) => row.status === 0 ? "隐藏" : "显示"
                },
                {
                    prop: 'img',
                    label: '图片',
                    align: 'center',
                    width: 110,
                    slot: 'img',
                },
                // {
                //     prop: 'isBottom',
                //     label: '底部悬浮',
                //     align: 'center',
                //     slot: 'isBottom',
                //     formatter: (row) => row.isBottom === 0 ? "正常" : "悬浮"
                // },
                {
                    prop: 'href',
                    label: '跳转地址',
                    align: 'center'
                },
                {
                    prop: 'desc',
                    label: '描述',
                    align: 'center'
                },
                // {
                //     prop: 'totals.click',
                //     label: '总点击数',
                //     align: 'center',
                //     sortable: true,
                //     width: 110,
                //     formatter: (row) => row.totals && row.totals.click ? row.totals.click : 0
                // },
                // {
                //     prop: 'days.click1',
                //     label: '昨日点击',
                //     align: 'center',
                //     width: 110,
                //     formatter: (row) => this.onGetClick(row.days, 2, 1)
                // },
                // {
                //     prop: 'days.click1',
                //     label: '今日点击',
                //     align: 'center',
                //     width: 110,
                //     formatter: (row) => this.onGetClick(row.days, 1)
                // },
                // {
                //     prop: 'days.click7',
                //     label: '本周点击',
                //     align: 'center',
                //     width: 110,
                //     formatter: (row) => this.onGetClick(row.days, 7)
                // },
                // {
                //     prop: 'days.click30',
                //     label: '本月点击',
                //     align: 'center',
                //     width: 110,
                //     formatter: (row) => this.onGetClick(row.days, 30)
                // },
                {
                    prop: 'createTime',
                    label: '创建时间',
                    align: 'center',
                    width: 110,
                    sortable: 'custom',
                    formatter: (row) => row.createTime ? formatDate(new Date(row.createTime)) : ''
                },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 90,
                    align: 'center',
                    fixed: 'right',
                    slot: 'action'
                }
            ]
        }
    },
    methods: {
        async datasource({ page, limit, where, order }) {
          let res=await  advertiseList({ ...where, ...order, page, limit })
            res.data.forEach(async v => {
                if (!v.img) return
                if (this.imageCache[v.img]) {
                    v.img = this.imageCache[v.img];
                } else {
                    v.img = await uploadToImg(v.img,2);
                    console.log(1111111111,v.img);
                    
                    this.imageCache[v.img] = v.img;
                }
            })
            return res
        },
        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
        },
        /* 打开编辑弹窗 */
        openEdit(row) {
            this.current = row;
            this.showEdit = true;
        },
        /* 删除 */
        remove(row) {
            const loading = this.$loading({ lock: true });
            delAdvertise({ ids: [row._id] })
                .then((msg) => {
                    loading.close();
                    this.$message.success(msg);
                    this.reload();
                })
                .catch((e) => {
                    loading.close();
                    this.$message.error(e.message);
                });
        },
        /* 批量删除 */
        removeBatch() {
            this.$confirm('确定要删除选中的视频吗?', '提示', {
                type: 'warning'
            })
                .then(() => {
                    const loading = this.$loading({ lock: true });
                    let ids = this.selection.map((d) => d._id)
                    delAdvertise({ ids })
                        .then((msg) => {
                            this.$message.success(msg);
                            this.reload();
                            loading.close();
                        })
                        .catch((e) => {
                            this.$message.error(e.message);
                            loading.close();
                        });
                })
                .catch(() => { });
        },
    }
}
</script>

<style scoped></style>
